<!-- 
###### Sun Dec 12 19:30:01 CST 2021
flex盒子实例
autocomplete 表单提交信息自动保存
lable 标签
子选择器，后续可以拿来练习伪类
 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <style>
        *{
            border: 0;
            margin: 0;
            padding: 0;
        }
        #root{
            /* 居中div的备用方案 */
            /* display: table-cell;
            Text-align: center;
            vertical-align: middle; */
            width: 300px;
            height: 300px;
            /* border: 1px dashed black; */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
       .boxClass{
           border: 1px solid black;
       }
       ul{
            height: 60%;
            border: 1px double black;
       }
       ul>li{
           list-style: none;
           height: 20%;
           margin: 5px 5px 0 5px;
           display: flex;
           justify-content: space-between;
       }
       ul>li>.login{
          position: relative;
          left: 45%;
       }
       .log{    
           display: flex;
           justify-content: center;
       }
       .log button{
           font-size: 15px;
           color: white;
           text-shadow: 2px 2px 2px rgb(102, 82, 82);
           width: 30%;
           border-radius: 10%;
           background-color: rgb(120, 155, 143);
       }
       .log button:hover{
            background-color: rgb(105, 199, 168);
       }
    </style>
</head>
<br>
    <!-- 使用label标签会获取焦点,表单的控制关系
        1.lable标签 for的里的名字和id必须一样
    -->
   <form id="root" method="/" autocomplete="no">
       <ul>

        <li>
            <label class="login">登录</label>
        </li>

        <li>
           <label for="Username">
               用户名：
           </label>
           <input type="text" class="boxClass" id="Username"/>
        </li>

        <li>
         <label for="Password">
             密码：
         </label>
             <input type="password" class="boxClass" id="password"/>
        </li>

        <li class="log">
            <button>键入</button>
        </li>
    </ul>
   </form>
</body>
</html>